<template>

  <div class="MyDetailsBottomData">
    <div style="margin-right: 471px;
    display: flex;
    flex-direction: row;">
      <img style="margin: 3px ;width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 42px;
    min-height: 42px;" src="http://cdn.forevergtt.love/imageName@th7" alt="NULL">
      <label>最后那个三</label>
    </div>


    <!--      点赞-->
    <label @click="DianZanCli">
      <svg t="1669538243011" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="2774" width="16" height="16">
        <path
            d="M906.408999 322.196472c-101.966327 0.643013-203.920011 1.295057-305.886339 1.939876 14.357613-50.554187 21.634859-95.47298 21.634858-135.021891 0-89.729212-78.61737-177.594409-157.128172-166.193572-69.230464 10.051594-76.818378 69.884314-76.818379 144.847708v67.689761c0 86.877197-72.925982 160.899552-157.471353 169.041975l-11.111843-0.095729v596.676322h602.570006c56.37201 0 104.784025-40.085358 115.28356-95.47298 28.07402-148.082641 56.137202-296.177926 84.211222-444.262374 12.04385-63.669124-29.798956-125.046159-93.457243-137.100847a116.257111 116.257111 0 0 0-21.826317-2.048249zM0.333247 479.870122v444.275017c0 42.507494 34.426482 76.935782 76.935782 76.935783h69.262976V403.665857c-23.090669-0.236614-46.172307-0.48226-69.262976-0.727905C34.78321 402.936146 0.333247 437.384302 0.333247 479.870122z"
            :fill="isDianZan" p-id="2775"></path>
      </svg>
      {{ Count }}</label>
    <!--      点踩-->
    <label @click="DianCaiCli">
      <svg t="1669538128984" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="8413" width="16" height="16">
        <path
            d="M0.324216 544.126266V99.856667c0-42.502075 34.439126-76.943007 76.950232-76.943007h69.252138v597.416871l-69.252138 0.727905C34.779598 621.060242 0.324216 586.621116 0.324216 544.126266zM906.401774 701.805334c-101.960909-0.643013-203.927236-1.295057-305.889952-1.936264 14.372063 50.5578 21.64389 95.465755 21.64389 135.014667 0 89.738243-78.615563 177.607053-157.128172 166.202603-69.225045-10.057012-76.829216-69.88612-76.829216-144.858545v-67.689761c0-86.871778-72.916951-160.897746-157.451485-169.040169l-11.119068 0.106567V22.915466h602.566394c56.362979 0 104.7768 40.090776 115.278141 95.47298 28.068601 148.097091 56.146233 296.181539 84.21664 444.269599 12.045656 63.672736-29.79715 125.053384-93.46808 137.09904a116.62016 116.62016 0 0 1-21.819092 2.048249z"
            :fill="isDianCai" p-id="8414"></path>
      </svg>
      {{caiCount}}
    </label>
    <!--      评论-->
    <label>
      <svg fill="black" t="1669181836128" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="5506" width="16" height="16">
        <path
            d="M711.4 925c-0.7 0-1.4 0-2.1-0.1-11.8-0.8-21.7-8.7-25.1-20l-62.9-208.8H110.6c-33.8 0-61.3-27.5-61.3-61.3V143.4c0-33.8 27.5-61.3 61.3-61.3H899c33.8 0 61.3 27.5 61.3 61.3v491.4c0 33.8-27.5 61.3-61.3 61.3h-63.8L737 908.6c-4.7 10.1-14.6 16.4-25.6 16.4zM110.6 114.4c-16 0-29 13-29 29v491.4c0 16 13 29 29 29h522.7c7.1 0 13.4 4.7 15.5 11.5l63.3 210.1 98.2-212.2c2.7-5.7 8.4-9.4 14.7-9.4h74c16 0 29-13 29-29V143.4c0-16-13-29-29-29H110.6z"
            fill="#E86262" p-id="5507"></path>
        <path
            d="M504.9 460.1c-5.8 0-11.7-0.7-17.4-2.2-18.4-4.6-33.9-16.1-43.7-32.4-9.8-16.3-12.6-35.4-7.9-53.8 4.6-18.4 16.1-33.9 32.4-43.7 16.3-9.7 35.4-12.5 53.8-7.9s33.9 16.1 43.7 32.4c9.8 16.3 12.6 35.4 7.9 53.8-4.6 18.4-16.1 33.9-32.4 43.6-11.2 6.8-23.7 10.2-36.4 10.2z m-0.2-109.8c-6.9 0-13.7 1.9-19.8 5.5-8.9 5.3-15.2 13.8-17.7 23.8s-1 20.4 4.3 29.3c5.3 8.9 13.8 15.2 23.8 17.7 10.1 2.6 20.4 1 29.3-4.3 8.9-5.3 15.2-13.8 17.7-23.8s1-20.4-4.3-29.3c-5.3-8.9-13.8-15.2-23.8-17.7-3.1-0.8-6.3-1.2-9.5-1.2z m-53.1 25.4h0.2-0.2zM262.5 460.1c-5.8 0-11.7-0.7-17.4-2.2-18.4-4.6-33.9-16.1-43.7-32.4-9.8-16.3-12.6-35.4-7.9-53.8 4.6-18.4 16.1-33.9 32.4-43.7 16.3-9.7 35.4-12.5 53.8-7.9s33.9 16.1 43.7 32.4c9.8 16.3 12.6 35.4 7.9 53.8-4.6 18.4-16.1 33.9-32.4 43.6-11.2 6.8-23.7 10.2-36.4 10.2z m-0.2-109.8c-6.9 0-13.7 1.9-19.8 5.5-8.9 5.3-15.2 13.8-17.7 23.8s-1 20.4 4.3 29.3c5.3 8.9 13.8 15.2 23.8 17.7 10.1 2.6 20.4 1 29.3-4.3 8.9-5.3 15.2-13.8 17.7-23.8s1-20.4-4.3-29.3c-5.3-8.9-13.8-15.2-23.8-17.7-3.1-0.8-6.3-1.2-9.5-1.2z m-53.1 25.4h0.2-0.2zM747.1 460.1c-15 0-30.1-4.7-42.9-14.5-31.2-23.7-37.3-68.4-13.6-99.6 23.7-31.2 68.4-37.2 99.5-13.5 31.2 23.7 37.3 68.4 13.6 99.5-13.9 18.4-35.1 28.1-56.6 28.1z m-30.7-94.5c-12.9 17-9.6 41.3 7.4 54.3s41.3 9.6 54.3-7.4c12.9-17 9.6-41.3-7.4-54.3-17-12.8-41.4-9.6-54.3 7.4z"
            fill="#E86262" p-id="5508"></path>
      </svg>
      {{ items.articleCommentCount }}</label>
<!--    {{this.item.articleDianzanCount}}-->

  </div>

</template>

<script>

import {addArticleDianZan_User} from "@/api/UserApi";

export default {
  name: "DianZanData",
  data() {
    return {
      isDianZan: "black",
      isDianCai: "black",
      items:this.item,
      Count:this.item.articleDianzanCount,
      caiCount:0
    }
  },
  watch:{
    item:{
      immediate:true,
      deep:true,
      handler(val){
        this.items=val
        this.Count=val.articleDianzanCount
      }
    }
  },
  destroyed() {
    this.updateDianZan()
  },
  props: ["item"],
  methods: {
    //点赞量增加
    updateDianZan(){
      addArticleDianZan_User(this.Count).then((res)=>{

      })
    },
    DianZanCli() {
      if (this.isDianZan !== "red") {
        this.isDianZan = "red"
        this.Count++;
      } else {
        this.isDianZan = "black"
        this.Count--;
      }
    },
    DianCaiCli() {
      if (this.isDianCai !== "red") {
        this.isDianCai = "red"
        this.Count--;
      } else {
        this.isDianCai = "black"
        this.Count++;
      }
    }
  }
}
</script>

<style scoped>

.MyDetailsBottomData {
  background-color: #fecfef;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.MyDetailsBottomData *{
  user-select: none;
}
.MyDetailsBottomData label {
  margin: 10px 10px;
}

.MyDetailsBottomData label :hover {
  cursor: pointer;
}
</style>
